<template>
    <div class="fixed inset-0  z-[1002] customPopoverBox"
        :style="`--inset:${popoverProps?.style?.inset};--width:${popoverWH.width}px;--height:${popoverWH.height}px;--backdrop-filter:${popoverProps?.backdropFilter};`"
        v-show="popoverProps?.isShow">
        <div ref="popoverRef" class="fixed flex flex-col shadow-xl shadow-black  customPopover"
            :style="popoverProps?.style" v-click-outside="onClickOutside">
            <div v-if="popoverProps.showTitle">
                <component v-if="popoverProps?.titleContent" :is="popoverProps?.titleContent" />
                <div v-else
                    class="p-[16px] h-[48px] border-b border-solid border-[var(--el-border-color-lighter)] bg-[var(--bg-2)] relative">
                    <div class="flex justify-between">
                        <div class="flex items-center gap-[8px] h-[16px]">
                            <!-- <el-icon class="w-[16px] h-[16px]">
                                <Grid />
                            </el-icon> -->
                            <titleList class="w-[16px] h-[16px] fill-[var(--text-color)]" />
                            <el-text class="font-bold !text-[16px] leading-[16px]">{{ popoverProps?.title }}</el-text>
                        </div>
                        <div class="h-[16px]">
                            <el-icon class="w-[16px] h-[16px] cursor-pointer" @click="closePopover">
                                <Close />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-1">
                <component :is="popoverProps?.content" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { popoverProps, closePopover } from "./index";
import { Grid, Close } from '@element-plus/icons-vue';
import { ClickOutside as vClickOutside } from 'element-plus'
import titleList from '@/assets/images/svg/title_list.svg'
defineOptions({
    name: "customPopover"
});
const route = useRoute()
const popoverRef = ref(null as HTMLElement | null)
const popoverWH = ref({
    width: 0,
    height: 0,
})
const onClickOutside = () => {
    closePopover();
};
watch(() => route.fullPath, () => {
    closePopover();
})
watch(() => popoverProps.value.isShow, () => {
    if (popoverProps.value.isShow) {
        nextTick(() => {
            const el = document.querySelector("#app");
            let scaleValues = el.style?.transform.slice(6, -1).split(",").map(Number);
            if (el.style?.transform != '') {
                if (scaleValues?.length < 2) {
                    scaleValues = [scaleValues[0] ?? 1, scaleValues[0] ?? 1];
                }
            } else {
                scaleValues = [1, 1];
            }
            const xScale = scaleValues[0];
            const yScale = scaleValues[1];
            let { width, height } = popoverRef.value.getBoundingClientRect()
            popoverWH.value.width = width / xScale
            popoverWH.value.height = height / yScale
            popoverRef.value.classList.add('customPopoverIn')
            setTimeout(() => {
                popoverRef.value.classList.remove('customPopoverIn')
            }, 300)
        })
    }
})
</script>
<style lang="scss" scoped>
.customPopover {
    opacity: 1;
}

.customPopoverIn {
    animation: fadeIn 0.3s ease-in-out;
    animation-fill-mode: forwards;

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
}

.customPopoverBox::before {
    content: '';
    position: absolute;
    inset: var(--inset);
    width: var(--width);
    height: var(--height);
    backdrop-filter: var(--backdrop-filter);
    z-index: -1;
}
</style>
